---
title: DialogContainer
description: A flexible modal component that provides a consistent way to display content in a modal dialog with predefined structure and styling.
---
import { DialogContainerExample } from "./dialog-container.example"

## Overview

`DialogContainer` is a flexible modal that offers a consistent way to display content. 

## Usage

```tsx
import { DialogContainer } from "@unkey/ui";

export default function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <DialogContainer
      isOpen={isOpen}
      onOpenChange={setIsOpen}
      title="Example Dialog"
      subTitle="Optional subtitle text"
      footer={
        <Button onClick={handleAction}>
          Confirm
        </Button>
      }
    >
      <div>Your dialog content here</div>
    </DialogContainer>
  );
}
```

## Examples

### Basic Example
A complete example showing the DialogContainer with all its features.

<DialogContainerExample />

## Features

- **Accessible Modal**: Accessible modal implementation with proper ARIA attributes
- **Customizable Overlay**: Customizable overlay and content styling
- **Close Button**: Built-in close button with warning support
- **Keyboard Navigation**: Full keyboard navigation support
- **Customizable Animations**: Configurable animations and transitions
- **Responsive Design**: Adapts to different screen sizes
- **Dark Mode Support**: Consistent appearance in light and dark themes
- **Predefined Structure**: Header, content, and footer sections

## Props

| Prop              | Type                    | Default   | Description                                      |
|-------------------|-------------------------|-----------|--------------------------------------------------|
| `isOpen`         | `boolean`               | -         | Controls the open state of the dialog            |
| `onOpenChange`   | `(value: boolean) => void` | -     | Callback when the open state changes             |
| `title`          | `string`                | -         | The title of the dialog                          |
| `subTitle`       | `string`                | -         | Optional subtitle for the dialog                 |
| `footer`         | `ReactNode`             | -         | Optional footer content                          |
| `className`      | `string`                | -         | Additional classes for the dialog container      |
| `contentClassName` | `string`               | -         | Additional classes for the dialog content        |
| `preventAutoFocus` | `boolean`              | `true`    | Whether to prevent autofocus on open             |
| `children`         | `ReactNode`            | -         | The content to display in the dialog             |

## Structure

The DialogContainer is composed of three main parts:

1. **Header** - Contains the title and optional subtitle
2. **Content Area** - The main content section where children are rendered
3. **Footer** - Optional section for actions like buttons or additional information

## Styling

The component comes with default styling that includes:

- **Responsive Width**: Responsive width and height constraints
- **Visual Effects**: Drop shadow and rounded corners
- **Overlay**: Overlay with backdrop blur effect
- **Dark Mode**: Full dark mode support
- **Customizable**: Extensive styling through `className` and `contentClassName` props

### Custom Styling

You can customize the appearance using className props:

```tsx
<DialogContainer
  isOpen={isOpen}
  onOpenChange={setIsOpen}
  title="Custom Dialog"
  className="custom-dialog-class"
  contentClassName="custom-content-class"
>
  Custom content
</DialogContainer>
```

## Accessibility

The DialogContainer implements the following accessibility features:

- **Focus Management**: Manages focus trap within the dialog
- **Keyboard Support**: Supports keyboard navigation (Esc to close)
- **ARIA Attributes**: Proper ARIA attributes for screen readers
- **Focus Control**: Focus management can be controlled via `preventAutoFocus`
- **Screen Reader Support**: Announces dialog state changes appropriately